<template>
  <div id="baSkuType">
    <v-tableTitle :title="$t('config.skuClassConfig')"></v-tableTitle>
    <div class="menu-tree">
      <el-card class="menu-tree-card base-card">
        <div slot="header">
          <span>{{$t('config.classInfo')}}</span>
        </div>
        <el-input class="filter-input" :placeholder="$t('config.inputMenuNameSearch')" v-model="filterText"
                  suffix-icon="el-icon-search">
        </el-input>
        <el-tree :style="`height:${height}` + 'px'" class="filter-tree" :data="treeData" default-expand-all
                 :props="defaultProps" accordion :filter-node-method="filterNode" ref="tree" @node-click="nodeClick">
        </el-tree>
        <!--   -->
      </el-card>
    </div>
    <div class="perDetail">
      <el-card class="base-card">
        <div slot="header">
          <span>{{$t('config.classDetail')}}</span>
        </div>
        <div class="detail">
          <p><span style="margin-right:8px;">{{$t('config.parentClassName')}}</span>{{ currentObj.parentTypeName }}</p>
          <p><span style="margin-right:8px;">{{$t('config.className')}}</span>{{ currentObj.typeName }}</p>
          <p><span style="margin-right:8px;">{{$t('config.classLevel')}}</span>{{ getPermisssionType(currentObj.typeLevel) }}</p>
          <p><span style="margin-right:8px;">{{$t('config.sortCode')}}</span>{{ currentObj.sortNum }}</p>
          <p><span style="margin-right:8px;">{{$t('app.remark')}}</span>{{ currentObj.remark }}</p>
        </div>
      </el-card>
    </div>
    <div class="btn">
      <el-button type="primary" @click="addPeer" :disabled="this.wmsFlag||(!this.btnPermNameList.includes('EN020901')&&!this.btnPermNameList.includes('WM031901'))">{{$t('config.addClass')}}</el-button>
      <el-button type="primary" @click="addBelow" :disabled="this.wmsFlag||this.addFlag||(!this.btnPermNameList.includes('EN020902')&&!this.btnPermNameList.includes('WM031902'))">{{$t('config.addChildClass')}}</el-button>
      <el-button @click="edit" :disabled="this.wmsFlag||this.editFlag||(!this.btnPermNameList.includes('EN020903')&&!this.btnPermNameList.includes('WM031903'))">{{$t('security.update')}}</el-button>
      <el-button @click="del" :disabled="this.wmsFlag||this.delFlag||(!this.btnPermNameList.includes('EN020904')&&!this.btnPermNameList.includes('WM031904'))">{{$t("common.delete")}}</el-button>
    </div>
    <el-dialog :visible.sync="dialogFlag" :title="title" v-dialogDrag :close-on-click-modal="false" width="500px"
               custom-class="base-dialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item :label="$t('config.parentClass')" prop="parentTypeName" class="width-2">
          <el-input v-model="ruleForm.parentTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.parentClassId')" prop="parentTypeId" hidden="true" class="width-2">
          <el-input v-model="ruleForm.parentTypeId" hidden="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.className')" prop="typeName" class="width-2">
          <el-input v-model="ruleForm.typeName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.classLevel')" prop="typeLevel" class="width-1">
          <el-select v-model="ruleForm.typeLevel" :placeholder="$t('config.inputClassLevelPlease')" disabled>
            <el-option :label="$t('code.level1')" :value="12701"></el-option>
            <el-option :label="$t('code.level2')" :value="12702"></el-option>
            <el-option :label="$t('code.level3')" :value="12703"></el-option>
            <el-option :label="$t('code.level4')" :value="12704"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('config.sortCode')" prop="sortNum" class="width-1">
          <el-input v-model="ruleForm.sortNum"></el-input>
        </el-form-item>
        <el-form-item :label="$t('app.remark')" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <el-form-item class="btn-center">
          <el-button type="primary" :disabled="this.wmsFlag||(!this.btnPermNameList.includes('EN020905')&&!this.btnPermNameList.includes('WM031905'))" @click="submitForm('ruleForm')" >{{$t("common.save")}}</el-button>
          <el-button :disabled="this.wmsFlag||(!this.btnPermNameList.includes('EN020906')&&!this.btnPermNameList.includes('WM031906'))" @click="cancel('ruleForm')">{{$t("common.cancel")}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectBaSkuTypeList,
  selectBaSkuTypeById,
  insertBaSkuType,
  updateBaSkuType,
  deleteBaSkuTypeById
} from '@/api/system/config';
import tableTitle from "@/components/commons/TableTitle";
import baseMixin from "@/mixins/BaseMixin";

export default {
  name: "baSkuType",
  mixins: [baseMixin],
  data() {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'node',
        label: 'typeName'
      },
      title: "",
      currentObj: {},
      wmsFlag:false,
      editFlag: true,
      addFlag: true,
      delFlag: true,
      dialogFlag: false,
      ruleForm: {
        parentTypeName: "",
        parentTypeId: "",
        typeName: "",
        typeLevel: "",
        sortNum: 1,
        remark: "",
      },
      rules: {
        typeName: [
          { required: true, message: this.$t('config.inputClassNamePlease'), trigger: 'blur' },
        ],
      },
      height: 0
    };
  },
  mounted() {
    this.height = this.getHeight(window, 100);
    this.getList();
    if(this.$store.state.wms.toUpperCase().includes('WMWHSE')){
      this.wmsFlag = true;
    }
  },
  components: {
    "v-tableTitle": tableTitle
  },
  methods: {
    getList(id) {
      // TODO 用户id
      // this.userId = this.$Cookies.get('userid');
      console.log(this.$store.state);
      selectBaSkuTypeList().then(res => {
        this.treeData = res.data;
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.typeName.indexOf(value) !== -1;
    },
    nodeClick(current, node, vueObj) {
      console.log(current);
      // 此处请求的接口返回的对象就是current本身
      // selectBaSkuTypeById(current.id).then(res => {
      //     console.log(res);
      // })
      // 每次点击先置亮三个按钮
      this.addFlag = this.editFlag = this.delFlag = false;
      this.currentObj = current;
      //四级时不能再新增子分类
      if (current.typeLevel === 12704) {
        this.addFlag = true;
      }
    },
    //新增同级
    addPeer() {
      this.dialogFlag = true;
      this.title = this.$t('security.add');
      if(this.currentObj.id == null || this.currentObj.id == undefined){
        this.ruleForm.parentTypeName = "";
        this.ruleForm.parentTypeId = 0;
        this.ruleForm.typeName = "";
        this.ruleForm.typeLevel = 12701;
        this.ruleForm.remark = "";
      }else{
        this.ruleForm.parentTypeName = this.currentObj.parentTypeName;
        this.ruleForm.parentTypeId = this.currentObj.parentTypeId;
        this.ruleForm.typeName = "";
        this.ruleForm.typeLevel = this.currentObj.typeLevel;
        this.ruleForm.remark = "";
      }

    },
    //新增下级
    addBelow() {
      this.dialogFlag = true;
      this.title = this.$t('security.add');
      this.ruleForm.parentTypeName = this.currentObj.typeName;
      this.ruleForm.parentTypeId = this.currentObj.id;
      this.ruleForm.typeName = "";
      this.ruleForm.typeLevel = this.currentObj.typeLevel+1;
      this.ruleForm.remark = "";
    },
    edit() {
      this.dialogFlag = true;
      this.title = this.$t('security.update');
      this.ruleForm.parentTypeName = this.currentObj.parentTypeName;
      this.ruleForm.parentTypeId = this.currentObj.parentTypeId;
      this.ruleForm.typeName = this.currentObj.typeName;
      this.ruleForm.typeLevel = this.currentObj.typeLevel;
      this.ruleForm.sortNum = this.currentObj.sortNum;
      this.ruleForm.remark = this.currentObj.remark;
    },
    del() {
      deleteBaSkuTypeById(this.currentObj.id).then(res => {
          this.treeData = [];
          this.getList();
          this.dialogFlag = false;
          this.$message.success(this.$t('app.delMes'))
        
      })
    },
    getPermisssionType(string) {
      let a = "";
      if (!string || string === undefined || string === null) {
        return ""
      } else {
        if(string === 12701){
          a = this.$t('code.level1');
        }else if(string === 12702){
          a = this.$t('code.level2');
        }else if(string === 12703){
          a = this.$t('code.level3');
        }else if(string === 12704){
          a = this.$t('code.level4');
        }
        return a;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === this.$t('security.add')) {
            let data = {};
            data.parentTypeName = this.ruleForm.parentTypeName;
            data.parentTypeId = this.ruleForm.parentTypeId;
            data.typeName = this.ruleForm.typeName;
            data.typeLevel = this.ruleForm.typeLevel;
            data.sortNum = this.ruleForm.sortNum;
            data.remark = this.ruleForm.remark;
            insertBaSkuType(data).then(res => {
              console.log(res);
                this.treeData = [];
                this.getList();
                this.dialogFlag = false;
                this.$message.success(this.$t('app.addMes'))
            })
          } else if (this.title === this.$t('security.update')) {
            let data = this.currentObj;
            data.parentTypeName = this.ruleForm.parentTypeName;
            data.parentTypeId = this.ruleForm.parentTypeId;
            data.typeName = this.ruleForm.typeName;
            data.typeLevel = this.ruleForm.typeLevel;
            data.sortNum = this.ruleForm.sortNum;
            data.remark = this.ruleForm.remark;
            updateBaSkuType(data).then(res => {
                this.treeData = [];
                this.getList();
                this.dialogFlag = false;
                this.$message.success(this.$t('app.upMes'))
            })
          } else {
            return;
          }
        } else {
          this.$message.error(this.$t('app.inputErrorMes'))
          return false;
        }
      });
    },
    cancel(formName){
      this.dialogFlag = false;
      this.$refs[formName].resetFields();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  }
}
</script>

<style lang="scss" scoped>
#baSkuType {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .menu-tree {
    float: left;
    width: 40%;

    .menu-tree-card {

      .filter-tree {
        overflow-y: scroll;
      }

      .filter-input {
        padding: 8px;
        border-bottom: 1px solid #ebeef5;
        position: relative;

        ::v-deep .el-input__suffix {
          right: 18px;
          top: 3px;

          .el-input__icon {
            font-size: 18px;
          }
        }
      }
    }
  }


  .perDetail {
    width: 60%;
    float: right;
    padding-left: 20px;

    ::v-deep .detail {
      background-color: #f3f3f3;
      padding: 8px 16px;

      p {
        margin: 0;
        padding: 8px 0;
      }
    }
  }

  .btn {
    margin-top: 8px;
    padding-left: 16px;
  }

  ::v-deep .el-dialog__body {
    .el-form {
      padding: 8px;
    }
  }


}
</style>